<template>
	<view class="user-dialog">
		<view class="user-dialog-left" v-if="step == 0 || step == 1 || step == 2">
			<view class="udl-icon">
				<image mode="widthFix" :src="systemLogo"></image>
			</view>
			<view class="udl-content">
				<text>正在为您分析结果......</text>
			</view>
		</view>
		<view class="user-dialog-left" v-if="step == 1">
			<view class="udl-icon">
				<image mode="widthFix" :src="systemLogo"></image>
			</view>
			<view class="udl-content">
				<image :src="src" mode="widthFix" :style="{width: (systemInfo.windowWidth - 40) * .65 + 'px'}" @longpress="openActionSheet"></image>
			</view>
		</view>
		<view class="user-dialog-left" v-if="step == 1">
			<view class="udl-icon">
				<image mode="widthFix" :src="systemLogo"></image>
			</view>
			<view class="udl-content">
				<text>长按上方图片保存您的结果卡片</text>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '../../src/utils/utils.js';
	export default {
		props: [
			'step', // 步骤 0|1|2-提示海报生成中 1-显示海报 显示保存海报
			'src',
			'systemLogo'
		],
		data() {
			return {
				systemInfo: {
					windowWidth: 0
				}, // 系统信息
			}
		},
		onReady() {
			// 获取系统信息
			this.systemInfo = utils.systemInfo();
		},
		methods: {
			// 打开长按图片选择列表
			openActionSheet() {
				uni.$emit('openActionSheet', true);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-dialog {
		margin: 0 0 200rpx 0;
		padding: 0 30rpx;
		&:after {
			content: '';
			display: block;
			clear: both;
		}
	}
	.user-dialog-left {
		margin-top: 18rpx;
		width: 100%;
		display: flex;
	
		&:after {
			display: block;
			clear: both;
			content: '';
		}
	
		.udl-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #fff;
	
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	
		.udl-content {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx 30rpx;
			margin-left: 20px;
			max-width: 65%;
			display: flex;
			align-items: center;
			image {
				width: 100%;
			}
			text {
				font-size: 32rpx;
				line-height: 40rpx;
				color: #666;
			}
		}
	}
</style>
